<template>
  <div>
    <div class="mb20 lh1">消息类型</div>
    <div class="ks-row-middle mb20 lh1">
      <el-select
        v-model="type"
        style="width: 100%"
        placeholder="请选择消息类型"
        filterable>
        <el-option
          v-for="item in options"
          :key="item.key"
          :label="item.label"
          :value="item.key"/>
      </el-select>
    </div>
    <div class="mb20 lh1">消息内容</div>
    <div class="ks-row-middle mb20 lh1">
      <el-input
        type="textarea"
        :disabled="!block.isEditable()"
        v-model="text"
        style="width: 100%"
        :maxlength="120"
        show-word-limit
        :autosize="{ minRows: 3}"
        placeholder="请输入文本内容"
      />
    </div>
  </div>
</template>

<script>


export default {
  name: 'Message',
  props: {
    eventItem: {}, // 需要逻辑编排的对象
    componentItem: {},
    block: {},
    workspace: {}
  },
  components: {},
  computed: {
    type: {
      get() {
        const type = this.block?.getFieldValue('Type')
        console.log('type', type)
        return type || ''
      },
      set(val) {
        this.block.setFieldValue(val, 'Type')
      }
    },
    text: {
      get() {
        const text = this.block?.getFieldValue('MESSAGE')
        console.log('text')
        return text || ''
      },
      set(val) {
        this.block.setFieldValue(val, 'MESSAGE')
      }
    }
  },
  data() {
    return {
      options: [
        {key: 'success', label: '成功'},
        {key: 'error', label: '错误'},
        {key: 'warning', label: '警告'},
        {key: 'info', label: '消息'}
      ]
    }
  },
  watch: {
    'block': {
      handler() {
        // this.getBlockData()
      },
      immediate: true
    }
  },
  methods: {
    getBlockData() {
      if (!this.list.length) return
      const blockComponentId = this.block?.getFieldValue('Component')
      if (blockComponentId) {
        this.modelId = blockComponentId
      }
    }
  }
}
</script>

<style scoped>

</style>
